<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/taglibs.jsp"%>
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">  
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="${ctx}/resources/semanticui/semantic.min.css" rel="stylesheet" type="text/css" />
    <link href="${ctx}/resources/apps.css" rel="stylesheet" type="text/css" />
    <link href="${ctx}/resources/imgup/css/common.css" rel="stylesheet" type="text/css" />
    <link href="${ctx}/resources/imgup/css/index.css" rel="stylesheet" type="text/css" />
    <title>上传头像</title>  
    <style>
    	#miniImg{
    		width:200px;
    		height: 200px;
    		margin-left: 35px;
    	}
    	.loading{
		    border: 1px solid #D1D1D1;
			background:url(${ctx}/resources/imgup/img/loading.gif) no-repeat center;
		}
    </style>
</head>
<body>
<div class="ui segment" id="n-page">
        &nbsp;<br>
        &nbsp;<br>
        <h3 class="ui attached header" id="list-title">
           上传个人头像
        </h3>
        &nbsp;<br>
        &nbsp;<br>
请提供您的个人头像，用于职道客户端展示。&nbsp;图片大小不得超过1M。<br>&nbsp;<br>
&nbsp;<br>
	<%--  <c:choose>
          <c:when test="${hunter.imageUrl != null }">
             <img class=" floated mini ui image" id="miniImg" src="${ctx}/rs/${hunter.imageUrl}.jpg">
          </c:when>
          <c:otherwise>    
         	 <img class=" floated mini ui image" id="miniImg" src="${hunter.headImgUrl}">
          </c:otherwise>
      </c:choose>  --%>
      
	<%-- <img class=" floated mini ui image" src="${ctx}/rs/${hunter.imageUrl}.jpg"> --%>
    <form action="${ctx}/wechat/hunter/uploadFile.do"  enctype="multipart/form-data" method="post" class="ui form" >
    	<div class="z_photo upimg-div clear" >
   			 <section class="z_file fl">
   			 	<c:if test="${hunter.imageUrl!=null}">
   			 		<img class=" floated mini ui image" id="miniImg" src="${ctx}/rs/${hunter.imageUrl}">
   			 		<input type="file" name="file" id="file" class="file" value="" accept="image/jpg,image/jpeg,image/png,image/bmp"  />
   			 	</c:if>
   			 	<c:if test="${hunter.imageUrl==null}">
					<img src="${ctx}/resources/imgup/img/a11.png" class="add-img">
					<input type="file" name="file" id="file" class="file" value="" accept="image/jpg,image/jpeg,image/png,image/bmp"  />
				</c:if> 
			</section>
    	</div>
    	<aside class="mask works-mask">
			<div class="mask-content">
				<p class="del-p ">您确定要删除吗？</p>
				<p class="check-p"><span class="del-com wsdel-ok">确定</span><span class="wsdel-no">取消</span></p>
			</div>
		</aside>
        <input type="hidden" name="hunterid" id="hunterid" value="${hunter.id}"/>
        <br/>
		<button class="fluid ui button" type="submit" style="paddint-top:10px;">下一步</button>
    </form>
</div>

<script src="${ctx}/resources/jweixin-1.0.0.js"></script>
<script src="${ctx}/resources/semanticui/jquery-2.1.4.min.js"></script>
<script src="${ctx}/resources/semanticui/semantic.js" type="text/javascript"></script>
<script src="${ctx}/resources/imgup/js/imgUp.js"></script>
<script type="text/javascript">
/* 
wx.config({
    debug: false, 
    appId: "${config.appid}",
    timestamp: ${config.currenttimestamp},
    nonceStr: "${config.nonceStr}", 
    signature: "${config.signatureStr}", 
    jsApiList: ['checkJsApi',
        'onMenuShareTimeline',
        'onMenuShareAppMessage',
        'onMenuShareQQ',
        'onMenuShareWeibo',
        'chooseImage',
        'previewImage',
        'uploadImage',
        'downloadImage',
        'closeWindow']  
}); */

    var url = '${ctx}/wechat/hunter/uploadFile.do';
    var handler = { 
        activate: function() { 
            $(this).addClass('active').siblings().removeClass('active'); 

            if($(this).attr('id') == 'next') {
                $(this).addClass('disabled');
                
/*                 wx.chooseImage({
                    count: 1,
                    success: function (res) {
                        var localId = res.localIds[0];
                        wx.uploadImage({ 
                            localId: localId,  
                            isShowProgressTips: 1,  
                            success: function (res) { 
                                var serverId = res.serverId;
                                headImgId=res.serverId;
                                $("#miniImg").attr("src",serverId);
                                wx.downloadImage({
                                    serverId: res.serverId, // 需要下载的图片的服务器端ID，由uploadImage接口获得
                                    isShowProgressTips: 1, // 默认为1，显示进度提示
                                    success: function (res) {
                                        var localId = res.localId; // 返回图片下载后的本地ID
                                        //获取本地图片接口
                                        wx.getLocalImgData({
                                            localId: localId, // 图片的localID
                                            success: function (res) {
                                                var localData = res.localData; // localData是图片的base64数据，可以用img标签显示
                                            }
                                        });
                                    }
                                });
                                url += "?resId=" + serverId;
                                location.href = url;
                            } 
                        });
                    }
                }); */
            }
            if($(this).attr('id') == 'closeit') {
              wx.closeWindow();
          }
        } 
    };

	$("#miniImg").change(function(){	 
		var idFile = $(this).attr("id");
		var file = document.getElementById(idFile);
		var imgContainer = $(this).parents(".z_photo"); //存放图片的父亲元素
		var fileList = file.files; //获取的图片文件
		var input = $(this).parent();//文本框的父亲元素
		var imgArr = [];
		//遍历得到的图片文件
		var numUp = imgContainer.find(".up-section").length;
		var totalNum = numUp + fileList.length;  //总的数量
		if(fileList.length > 1 || totalNum > 1 ){
			alert("上传图片数目不可以超过1个，请重新选择");  //一次选择上传超过5个 或者是已经上传和这次上传的到的总数也不可以超过5个
		}
		else if(numUp < 1){
			fileList = validateUp(fileList);
			for(var i = 0;i<fileList.length;i++){
			 var imgUrl = window.URL.createObjectURL(fileList[i]);
			     imgArr.push(imgUrl);
			 var $section = $("<section class='up-section fl loading'>");
			     imgContainer.prepend($section);
			 var $span = $("<span class='up-span'>");
			     $span.appendTo($section);
			
		     var $img0 = $("<img class='close-upimg'>").on("click",function(event){
				    event.preventDefault();
					event.stopPropagation();
					$(".works-mask").show();
					delParent = $(this).parent();
				});   
				$img0.attr("src","../../../../resources/imgup/img/a7.png").appendTo($section);
		     var $img = $("<img class='up-img up-opcity'>");
		         $img.attr("src",imgArr[i]);
		         $img.appendTo($section);
		     var $p = $("<p class='img-name-p'>");
		         $p.html(fileList[i].name).appendTo($section);
		     var $input = $("<input id='taglocation' name='taglocation' value='' type='hidden'>");
		         $input.appendTo($section);
		     var $input2 = $("<input id='tags' name='tags' value='' type='hidden'/>");
		         $input2.appendTo($section);
		      
		   }
		}
		setTimeout(function(){
             $(".up-section").removeClass("loading");
		 	 $(".up-img").removeClass("up-opcity");
		 },450);
		 numUp = imgContainer.find(".up-section").length;
		if(numUp >= 1){
			$(this).parent().hide();
		}
	});
    
    var headImgId;
    
    $(document).ready(function() { 
    	
        wx.ready(function(){
            $('.button').on('click', handler.activate);
        });

    });

</script>
</body>
</html>